<template>
  <div class="drop_wrap">
    <input type="checkbox" class="drop_switch" v-model="toggleStatus" />
    <div class="drop_wrap_btn">
      <i class="mdi mdi-menu-down"></i>
      <i class="mdi mdi-menu-up"></i>
      <span>查看源代码</span>
    </div> 
    <div class="drop_wrap_container" :style="{ height: toggleStatus ? eleH : '0px' }" :class="containerPositionClass">
      <div class="cont" ref="dropWrapEl">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from "vue";

/* 
 获取元素
*/
const dropWrapEl = ref({});

/* 
 响应式数据
*/

let containerPositionClass = ref<string>("fixed");
let eleH = ref<string>("");
let toggleStatus = ref<boolean>(false);

/* 
生命周期
*/
onMounted(() => {
  eleH.value = dropWrapEl?.value?.clientHeight + "px";
  toggleStatus.value = false;
  containerPositionClass.value = "";
});
</script>
<style lang="scss" scoped>
.drop_wrap {
    position: relative;
    margin-top:20px ;
  .drop_switch {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 24px;
    cursor: pointer;
  }
  .drop_wrap_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #409eff;
  }
  .drop_wrap_container {
    .cont {
      padding: 30px 0px;
    }

    .cont.fixed {
      position: fixed;
      z-index: -10;
      top: 0px;
      left: 0;
      // opacity: 0;
    }
  }
  .drop_wrap_btn > .mdi-menu-down {
    display: none;
  }
  .drop_wrap_container {
    overflow: hidden;
    transition: all 0.6s;
  }
}
input[type="checkbox"].drop_switch{
    opacity: 0;

}
input[type="checkbox"]:checked.drop_switch ~ .drop_wrap_btn > .mdi-menu-up {
  display: none;
}
input[type="checkbox"]:checked.drop_switch ~ .drop_wrap_btn > .mdi-menu-down {
  display: block;
}
</style>